@import 'contextMenu.scss';
@import "loading.scss";
@import "modal.scss";
@import "select.scss";
body {
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    padding: 0;
    margin: 0;
    font-size: 12px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

#app::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
#app::-webkit-scrollbar-track {
    background-color: #eeeeee;
    border-radius: 3px;
}
#app::-webkit-scrollbar-thumb {
    background-color: #cccccc;
    border-radius: 3px;
}

* {
    box-sizing: border-box;
}

#app {
    width: 100vw;
    height: 100vh;
}

.js-header {
    height: 70px;
    width: 100%;
    background-color: #EFEFEF;
    padding: 10px;
    pointer-events: none;
    position: relative;
    ul {
        padding: 0;
        margin: 0;
        display: inline-block;
        border-right: 1px solid #aaa;
        font-size: 12px;
    }
    ul:last-child {
        border-right: none;
    }
    .disabled {
        color: #ccc;
        cursor: not-allowed;
        pointer-events: none;
        img {
            filter: gray;
            -webkit-filter: grayscale(100%);
            opacity: 0.3;
        }
        li {
            pointer-events: none;
        }
    }
    li {
        display: inline-block;
        margin: 0 5px;
        cursor: pointer;
        position: relative;
        pointer-events: all;
        padding: 2px;
        border: 1px solid transparent;
        .icon {
            text-align: center;
            display: block;
            margin: 2px auto;
        }
    }
    li.active, li:active {
        background-color: #E5E4E6;
        border: 1px solid #4D5952;
        box-shadow: 0 0 3px #999 inset;
        border-radius: 3px;
    }
    .btn-sub {
        padding-right: 5px;
        &::after {
            content: "\25be";
            position: absolute;
            bottom: 0;
            right: -3px;
        }
    }
}

.js-container {
    height: calc(100% - 40px);
    width: 100%;
    background-color: #EDEDED;
    padding: 20px 10px 10px;

    overflow: hidden;
}

.js-footer {
    height: 20px;
    width: 100%;
    background-color: #eee;
}

.svg-linear-defs {
    position: absolute;
    left: -9999px;
    top: -9999px;
}

/***  **/

.js-chart-container {
    height: 70% !important;
    width: 100% !important;
    overflow: auto;
}

.js-plan-container {
    height: 30% !important;
    border: 1px solid #7A7A7A;
    border-top: none;
    background-color: #fff;
    width: calc(100% - 30px);
    margin-left: 30px;
    padding-top: 6px;
    overflow: auto;
    .js-plan {
        display: inline-block;
        margin-left: 15px;
        overflow: auto;
        p {
            font-size: 12px;
            margin: 0;
            margin-bottom: -2px;
        }
        ul {
            padding: 0;
            list-style: none;
            margin: 0;
            //height: 8px;
            display: inline-flex;
            border: 1px solid #000;
        }
        li {
            width: 40px;
            height: 8px;
            background: #ccc;
            display: inline-block;
            border-right: 1px solid #000;
            cursor: pointer;
            background-image: linear-gradient(to bottom, #959595, #A6A4A0, #B1B1B2, #C1C1C1, #D8D7DA, #C1C1C1, #B1B1B2, #A6A4A0, #959595)
        }
        li:last-child {
            border-right: none;
        }
        li.start {
            width: 15px;
            background-color: #FF5A57;
            background-image: linear-gradient(to bottom, #FF5A57, #FF5A57, #FF5A57, #F1BA8D, #F9B8B1, #F1BA8D, #FF5A57, #FF5A57, #FF5A57)
        }
        li.wait {
            background-image: linear-gradient(to bottom, #6C2391, #8446A3, #9B68B1, #B38ACA, #C6ACD0, #B38ACA, #9B68B1, #8446A3, #6C2391)
        }
        ul.js-color2 {
            li.wait {
                background-image: linear-gradient(to bottom, #00b6c7, #00d2e6, #0aeaff, #7af4ff, #99f7ff, #7af4ff, #0aeaff, #00d2e6, #00b6c7)
            }
        }
        ul.js-color3 {
            li.wait {
                background-image: linear-gradient(to bottom, #23906B, #45A381, #69B39A, #89C4B1, #ACD5C8, #89C4B1, #69B39A, #45A381, #23906B)
            }
        }
        ul.js-colorelse {
            li.wait {
                background-image: linear-gradient(to bottom, #1f3747, #2a4a60, #355d79, #407191, #679abc, #407191, #355d79, #2a4a60, #1f3747)
            }
        }
    }
}

.js-raodong-container{
    float: right;
    margin-top: 15px !important;
}
.js-iron-container {
    float: right;
    margin-top: 10px;
    margin-right: 10px;
    //position: absolute;
    //right: 10px;
    //top:10px;
    font-size: 11px;
    li {
        margin: 0 10px;
        text-align: center;
        &:active {
            background-color: inherit;
            box-shadow: none;
            border-color: transparent;
        }
    }

    p {
        margin: 0;
        text-align: center;
    }

    img {
        width: 15px;
    }

    // div {
    //     width: 40px;
    //     height: 10px;
    //     border: 1px solid #000;
    //     background-image: linear-gradient(to bottom, #959595, #A6A4A0, #B1B1B2, #C1C1C1, #D8D7DA, #C1C1C1, #B1B1B2, #A6A4A0, #959595)
    // }
}

.js-iron-tooltip {
    span {
        width: 40px;
        display: inline-block;
    }
    .dcz b {
        width: 65px;
        display: inline-block;
    }
}

.js-tooltip {
    position: absolute;
    background-color: rgba(255, 255, 255, 0.9);
    border: 1px solid #aaa;
    border-radius: 5px;
    padding: 10px;
    box-shadow: 0 0 3px rgba(0, 0, 0, .5);
    left: -9999px;
    top: -9999px;
    p {
        margin: 0;
    }

    ul {
        padding-left: 0;
        margin-bottom: 0;
        margin-top: 5px;
        li {
            list-style: none;
            padding-left: 0;
        }

        li::before {
            content: "• ";
            color: red; /* or whatever color you prefer */
          }
    }
}

.js-simple-tooltip {
    padding: 3px;
    width: 150px;
    border-radius: 3px;
}

.js-heat-tooltip {
   ul li::before {
      color: blue;
   }
}

.js-btn {
    padding: 3px 20px;
    cursor: pointer;
    background-color: #fff;
    border-color: #ccc;
    color: #555;
    outline: none;
    border: 1px solid #ccc;
    &:hover,
    &:focus {
        background-color: #ddd;
        border-color: #ccc;
    }

    &.disabled {
        cursor: not-allowed;
        pointer-events: none;
        background: #eee;
    }
}

.js-btn-success {
    background-color: #5cb85c;
    border-color: #4cae4c;
    color: #fff;
    &:hover,
    &:focus {
        background-color: #449d44;
        border-color: #398439;
    }
}

.js-datatable-header {
    margin-top: 14px;
    border: 1px solid #ccc;
    table {
        border: none;
        table-layout: fixed;
    }
    th {
        border-top: none !important;
        border-bottom: none !important;
    }
    tr th:first-child {
        border-left: none;
    }
    tr th:last-child {
        border-right: none;
    }
}

.js-datatable-body {
    max-height: 250px;
    overflow-y: auto;
    border: 1px solid #ccc;
    table {
        border: none;
        table-layout: fixed;
    }
    td,
    th {
        min-width: 50px;
    }
    tr:first-child {
        td {
            border-top: none;
        }
    }
    tr td:first-child {
        border-left: none;
    }
    tr td:last-child {
        border-right: none;
    }
    tr:last-child {
        td {
            border-bottom: none;
        }
    }
    tr:nth-of-type(odd) {
        background-color: #f9f9f9;
    }
}

.highcharts-point-select .highcharts-point {
    fill: url(#hc-selected);
}

.hc-finished,
.highcharts-point-select .hc-finished {
    fill: url(#hc-finished);
}

.hc-finished rect {
    fill: url(#hc-finished)!important;
}

.highcharts-point-warning .highcharts-point{
    fill: url(#hc-warning)
}

.highcharts-point .highcharts-label text {
    fill: #333;
    stroke: #333;
    font-weight: bold;
    stroke-width: 0;
    font-size: 10px;
}

.highcharts-point-select .highcharts-label text {
    fill: #eee;
    stroke: #eee;
}

.highcharts-point-current .highcharts-point {
    fill: url('#hc-current');
}

.highcharts-point .highcharts-point-error {
    opacity: 0;
}

.highcharts-point-select .highcharts-point-error {
    fill: red;
    stroke-width: 0;
    opacity: 1;
}


